<template>
  <div>
    <scroller class="scroller border-bottom mb-2"
              :show-scrollbar="false"
              scroll-direction="horizontal">
      <text class="tab-text"
            v-for="(cate, index) in categories"
            :class="[cateIndex===index?'tab-text-active':'']"
            :key="index"
            @click="onCateSelect(cate, index)">{{cate.name}}</text>
    </scroller>

    <div class="bg-white flex-row">
      <text class="type-text"
            v-for="(type, index) in types"
            :class="[typeIndex===index?'type-text-active':'']"
            :key="index"
            @click="onTypeSelect(type, index)">{{type}}</text>
    </div>

    <div class="bg-white p-2">
      <text class="p-1 text-center text-lg">{{label}}</text>
      <text class="text-muted small text-center mb-2">(点击可查看具体数值, 0表示无数据)</text>
    </div>

    <bmchart ref="chart"
             :options="$format(options)"
             style="width:750; height:560;"></bmchart>
  </div>
</template>
<script>
import {
  STORAGE_FARM
} from '../../plugins/constant'

export default {
  components: {},
  props: {},
  data() {
    return {
      categories: [
        {
          name: '活鸡',
          code: '100604005000',
          city: {
            isFetch: false,
            xData: [],
            aData: [],
            bData: []
          },
          town: {
            isFetch: false,
            xData: [],
            aData: [],
            bData: []
          }
        },
        {
          name: '鸡蛋',
          code: '100605000000',
          isFetch: false,
          city: {
            isFetch: false,
            xData: [],
            aData: [],
            bData: []
          },
          town: {
            isFetch: false,
            xData: [],
            aData: [],
            bData: []
          }
        },
      ],
      cateIndex: 0,
      types: ['各区县行业地位', '各乡镇行业地位'],
      typeIndex: 0,
      options: {},
      cityCode: '',
      townCode: '',
      maps: {
        0: 'city',
        1: 'town'
      }
    }
  },
  computed: {
    label() {
      return this.categories[this.cateIndex].name + this.types[this.typeIndex]
    }
  },
  watch: {},
  created() {
    this.getFarm()
  },
  methods: {
    getFarm() {
      this.farm = this.$storage.getSync(STORAGE_FARM) || {}
      if (!this.farm.id) {
        return this.$notice.toast({ message: '请先添加鸡场' })
      }

      let code = this.farm.farmAddressCode
      code = Number.parseInt(code)
      code = isNaN(code) ? 0 : code
      if (!code) {
        return this.$notice.toast({ message: '请先完善鸡场地址信息' })
      }

      const city = Math.floor(code / Math.pow(10, 8))
      this.$notice.toast({ message: city })
      if (city % 100 > 0) {
        this.cityCode = `${city}${Array(9).join('0')}`
        const town = Math.floor(code / Math.pow(10, 6))
        if (town % 100 > 0) {
          this.townCode = `${town}${Array(7).join('0')}`
        }
      } else {
        return this.$notice.toast({ message: '请先完善鸡场地址信息' })
      }

      this.cateIndex = 0
      this.typeIndex = 0
      this.getCollect()
    },
    onCateSelect(cate, index) {
      this.cateIndex = index
      this.getCollect()
    },
    onTypeSelect(type, index) {
      this.typeIndex = index
      this.getCollect()
    },
    getCollect() {
      const data = this.categories[this.cateIndex][this.maps[this.typeIndex]] || {}
      const code = this.typeIndex === 0 ? this.cityCode : this.townCode

      if (data.isFetch) {
        return this.setOption()
      }
      if (!code) {
        return this.$notice.toast({ message: '请先完善鸡场地址信息' })
      }

      this.$notice.loading.show()
      this.$http({
        name: 'industrial.farm.collect',
        data: {
          addressCode: code,
          categoryCode: this.categories[this.cateIndex].code
        },
        errorMsg: '获取产业数据失败'
      }).then(res => {
        data.isFetch = true
        if (!res) {
          this.$notice.toast({ message: '无该产业数据' })
        }
        data.xData = res.addressList
        data.aData = res.farmNumList
        data.bData = res.farmScaleList
        this.setOption()
      }).finally(() => {
        this.$notice.loading.hide()
      })
    },

    setOption() {
      const { xData, aData, bData } = this.categories[this.cateIndex][this.maps[this.typeIndex]] || {}
      this.options = {
        backgroundColor: '#ffffff',
        title: {
          show: false,
          text: '',
          subtext: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {          // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['农场数量', `规模数量`],
          top: 0
        },
        grid: {
          top: 80,
          left: 50,
          right: 50
        },
        xAxis: [{
          type: 'category',
          data: xData || []
        }],
        yAxis: [{
          type: 'value',
          name: '农场数量'
        }, {
          type: 'value',
          name: `规模数量`
        }],
        series: [{
          name: '农场数量',
          type: 'bar',
          data: aData || [],
          barMaxWidth: 40
        }, {
          name: `规模数量`,
          type: 'line',
          data: bData || [],
          yAxisIndex: 1
        }]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.text-muted {
  color: #999;
}
.text-gray {
  color: #666;
}
.bg-white {
  background-color: #fff;
}
.small {
  font-size: 26px;
}
.mb-1 {
  margin-bottom: 10px;
}
.mb-2 {
  margin-bottom: 20px;
}
.mb-3 {
  margin-bottom: 30px;
}
.p-3 {
  padding: 30px;
}
.p-2 {
  padding: 20px;
}
.p-1 {
  padding: 10px;
}
.flex-row {
  flex-direction: row;
}
.flex {
  flex: 1;
}
.text-center {
  text-align: center;
}
.align-center {
  align-items: center;
}
.border-bottom {
  border-bottom-color: $border-color;
  border-bottom-width: 1px;
}

.text-lg {
  font-size: 34px;
}

.scroller {
  padding: 15px;
  background-color: #fff;
  flex-direction: row;
  height: 100px;
}
.tab-text {
  padding-left: 60px;
  padding-right: 60px;
  margin-right: 30px;
  height: 70px;
  line-height: 70px;
  align-items: center;
  border-radius: 35px;
  border-style: solid;
  border-width: 1px;
  border-color: $accent;
}
.tab-text-active {
  color: #fff;
  background-color: $accent-light;
}
.type-text {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px;
  border-style: solid;
  border-width: 1px;
  border-color: $border-color;
  text-align: center;
  flex: 1;
  color: #666;
}
.type-text-active {
  color: #fff;
  background-color: $primary-light;
}
</style>
